<template>
  <!-- <div class="test1" id="test1"></div> -->
  <!-- <div class="test1" id="test1"></div> -->
   <p>{{ text }}</p>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as THREE from "three";
import { OBJLoader } from "three/addons/loaders/OBJLoader.js";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";



const text = `
var num = 99;\n
if(num) {  \n
  console.log(99); \n
}
`




onMounted(() => {
  init();
});

const init = () => {
  // create a scene
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  const test1 = document.getElementById("test1");
  test1 && test1.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 5;

  function animate() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  renderer.setAnimationLoop(animate);

  // instantiate a loader
  // const loader = new OBJLoader();

  // // load a resource
  // loader.load(
  //   // resource URL
  //   "models/SU7.obj",
  //   // called when resource is loaded
  //   function (object) {
  //     scene.add(object);
  //   },
  //   // called when loading is in progresses
  //   function (xhr) {
  //     console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  //   },
  //   // called when loading has errors
  //   function (error) {
  //     console.log("An error happened");
  //   }
  // );

  // instantiate a loader
  const loader = new FBXLoader();

  // load a resource
  loader.load(
    // resource URL
    "models/SU-7.fbx",
    // called when resource is loaded
    function (object) {
      scene.add(object);
    },
    // called when loading is in progresses
    function (xhr) {
      // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
    },
    // called when loading has errors
    function (error) {
      console.log("An error happened");
    }
  );
};
</script>

<style scoped>
.test1 {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

img {
  width: 100px;
  height: 100px;
}

.flex {
  display: flex;
}

.imgs {
  width: 20px;
  height: 20px;
}
</style>
